<canvas id="canvas" width="100" height="100"></canvas>
<script>
function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#0f0';
  ctx.fillRect(0, 0, 90, 90);
  ctx.filter = 'url(resources/blur.svg#blur)';
  ctx.fillStyle = '#f00';
  ctx.fillRect(20, 20, 30, 30);

  if (window.testRunner)
    testRunner.notifyDone();
}

if (window.testRunner)
  testRunner.waitUntilDone();

var svgElement = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svgElement.setAttribute('width', '0');
svgElement.setAttribute('height', '0');
var useElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
useElement.addEventListener("load", draw);
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "resources/blur.svg#blur");
svgElement.appendChild(useElement);
document.body.appendChild(svgElement);
</script>
